<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="品牌">
                <a-select v-model="queryParam.brand" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="年份">
                <a-date-picker
                  mode="year"
                  style="width:100%;"
                  placeholder="请选择年份"
                  format="YYYY"
                  v-model="queryParam.year"
                  :open="yearShowOne"
                  @change="handChange"
                  @openChange="openChangeOne"
                  @panelChange="panelChangeOne"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="季节">
                <a-select v-model="queryParam.season" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option :value="1">春</a-select-option>
                  <a-select-option :value="2">夏</a-select-option>
                  <a-select-option :value="3">秋</a-select-option>
                  <a-select-option :value="4">冬</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a-button style="margin-left: 8px" type="primary" icon="plus" @click="handleAdd">新建</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" style="margin-top:32px;">
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
        <span slot="season" slot-scope="text">{{ text | seasonList }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <router-link :to="`/goods/pre-assigned/detail/${record.id}`">查看明细</router-link>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除该条计划？" @confirm="confirm(record)">
            <a href="#">删除</a>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
    <PlanEdit :brandList="brandList" ref="edit" @updateTable="updateTable"></PlanEdit>
  </div>
</template>
<script>
import { STable } from '@/views/box/components'
import moment from 'moment'
import { queryBrand, queryProductPreAssigned, delProductPreAssigned } from '@/api/goods/preAssigned'
import PlanEdit from './components/planEdit'
const columns = [
  { title: '序号', dataIndex: 'serialNo', align: 'center' },
  { title: '品牌', dataIndex: 'brandName', align: 'center' },
  { title: '年份', dataIndex: 'year', align: 'center' },
  { title: '季节', dataIndex: 'season', align: 'center', scopedSlots: { customRender: 'season' } },
  // { title: '预计入库时间', dataIndex: 'preEntryTime', align: 'center' },
  // { title: '预计预分开始时间', dataIndex: 'preAssignedBeginTime', align: 'center' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'plan',
  components: { STable, PlanEdit },
  data() {
    this.columns = columns
    return {
      queryParam: {
        brand: '',
        season: '',
        year: null
      },
      yearShowOne: false,
      brandList: [],
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => this.fetchData(parameter)
    }
  },
  filters: {
    seasonList(key) {
      switch (key) {
        case '1':
          return '春'
          break
        case '2':
          return '夏'
          break
        case '3':
          return '秋'
          break
        case '4':
          return '冬'
          break
      }
    }
  },
  watch: {
    $route(to, from) {
      let currentPath = '/goods/pre-assigned/plan'
      let detailPath = '/goods/pre-assigned/detail'
      if (from.path.includes(detailPath) && to.path.includes(currentPath)) {
        this.$refs.table.refresh()
      } else if (!to.path.includes(detailPath) && from.path.includes(currentPath)) {
        // console.log('name:' + this.$options.name)
        this.$destroy()
      }
    }
  },
  mounted() {
    // console.log(this.$options)
    this.getBrands()
  },
  methods: {
    getBrands() {
      queryBrand().then(res => {
        if (res.code == 0) {
          this.brandList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchData(parameter) {
      let formValue = {}
      Object.keys(this.queryParam).forEach(e => {
        if (this.queryParam[e]) {
          formValue[e] = this.queryParam[e]
        }
      })
      let params = {
        page: parameter,
        requestData: formValue
      }
      return queryProductPreAssigned(params).then(res => {
        if (res.code == 0) {
          return res
        } else {
          this.$message.warning(res.msg)
          const data = {
            page: {
              pageNo: 0
            },
            data: []
          }
          return data
        }
      })
    },
    search() {
      this.$refs.table.refresh(true)
    },
    reset() {
      this.queryParam = {
        brand: '',
        season: '',
        year: null
      }
      this.$refs.table.refresh(true)
    },
    handleAdd() {
      this.$refs.edit.show()
    },
    handleEdit(record) {
      this.$refs.edit.show(record)
    },
    handChange() {
      this.queryParam.year = null
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      this.yearShowOne = status
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      // console.log(value)
      this.queryParam.year = moment(value).format('YYYY')
      this.yearShowOne = false
    },
    // 删除确认
    confirm(record) {
      let params = {
        requestData: {
          assignedId: record.id
        }
      }
      delProductPreAssigned(params).then(res => {
        if (res.code == 0) {
          this.$message.success('删除成功！')
          this.updateTable()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    updateTable() {
      this.$refs.table.refresh()
    }
  }
}
</script>
